<template>
    <section class="main-header">
        <input
            id="toggle-all"
            class="toggle-all"
            type="checkbox"
            v-model="$parent.checkAllState"
            @change="toggleAll"
        />
        <!--全选按钮-->
        <label class="check-all-icon" for="toggle-all" title="全部标记为完成" v-if="$parent.showCheckAllInput"></label>
        <!--全选按钮不显示时避免空白-->
        <label class="write-do-icon" title="请从这里开始……" v-if="!$parent.showCheckAllInput"></label>
        <!--ref属性用于方法中操作dom事件-->
        <input
            ref="inputValue"
            class="input-value"
            autofocus="autofocus"
            placeholder="接下来要做什么呢？"
            v-model="inputValue"
            @keyup.enter="AddTodoItem"
        />
    </section>
</template>

<script>
import * as localforage from "localforage";
import SnowflakeId from "snowflake-id";

export default {
    name: "InputValue",
    props: {
        currentTab: {
            type: String,
            required: true
        }
    },
    data: function () {
        return {
            // 默认值
            inputValue: '',
        }
    },
    methods: {
        // 添加数据方法
        AddTodoItem(e) {
            if (this.inputValue.trim() == '') {
                alert('标题不能为空');
                return;
            }

            // Initialize snowflake
            const snowflake = new SnowflakeId({
                mid: 58,
                offset: (new Date().getFullYear() - 1970) * 31536000 * 1000
            });

            let info = {
                id: snowflake.generate(), // 使用snowflake生成ID
                value: this.inputValue.trim(),
                completed: false,
                create_time: Math.round(new Date() / 1000)
            };

            console.info('添加元素:', info);

            // 写入indexDB数据库。key为id，value为对象
            localforage.setItem(info.id, info).then(function (value) {
                // 当值被存储后，可执行其他操作
                console.log(value);
            }).catch(function (err) {
                // 当出错时，此处代码运行
                console.log(err);
            });

            this.$parent.list.unshift(info);

            // 清空输入框
            this.inputValue = '';

            // 让其主动失去焦点
            //this.$refs.inputValue.blur();
            //e.target.blur();

            // 如果当前tab不在all时，切换到all
            if (this.$parent.currentTab !== 'all') {
                this.$parent.currentTab = 'all';
            }
        },
        // 数据全选方法
        toggleAll: function (e) {
            let data = this.$parent.list;

            // 非completed时，都设置为全选，否则取消全选
            if (this.currentTab !== 'completed') {
                // 遍历设置为选中
                for (let i = 0; i < data.length; i++) {
                    // 是否已选
                    if (this.$parent.checkAllState) {
                        // 更新状态必须更新全局
                        this.$parent.list[i].completed = data[i].completed = true;
                    } else {
                        // 更新状态必须更新全局
                        this.$parent.list[i].completed = data[i].completed = false;
                    }

                    // 遍历更新数据库条目
                    localforage.setItem(data[i].id, data[i]).then(function (value) {
                        // 当值被存储后，可执行其他操作
                        console.log('更新状态完成.');
                    }).catch(function(err) {
                        // 当出错时，此处代码运行
                        console.log(err);
                    });
                }
            } else {
                // 遍历取消选中
                for (let i = 0; i < data.length; i++) {
                    if (data[i].completed) {
                        // 更新状态必须更新全局
                        this.$parent.list[i].completed = false;

                        // 遍历更新数据库条目
                        localforage.setItem(data[i].id, data[i]).then(function (value) {
                            // 当值被存储后，可执行其他操作
                            console.log('更新状态完成.');
                        }).catch(function(err) {
                            // 当出错时，此处代码运行
                            console.log(err);
                        });
                    }
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
